<template>
  <div class="margin30 line-height40">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick" @edit="handleTabsEdit">
      <div class="fr marginT10">
        <el-button type="primary" plain @click="add">添加维度</el-button>
      </div>
      <el-tab-pane label="用户管理" closable name="first">用户管理

      </el-tab-pane>
      <el-tab-pane label="配置管理" closable name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" closable name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" closable name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>-->

    <!-- <div>
      <span>关联分类</span>
      <el-switch v-model="value1" />
    </div>-->

    <!-- 栏目管理 -->
    <category :list="[]" biz-type-enum="COLUMN" :gutter="20" @Callback="categoryCallback" />
    <editorTags
      v-if="list"
      :list="list"
      :param="params"
      :type-enum="tagsTypeEnum"
      :is-category="false"
    />
  </div>
</template>

<script>
import category from '@/components/Category';
import editorTags from './component/editorTags';

import { findColumnTags } from '@/api/section';
export default {
  name: 'Section',
  components: { category, editorTags },
  data () {
    return {
      list: null,
      params: null,
      tagsTypeEnum: 'COLUMN_TAGS'
    };
  },
  created () {

  },
  methods: {
    categoryCallback (obj) {
      this.params = {
        growthClassify: obj.GROWTH_CLASSIFY.itemCode || '',
        stageList: obj.STAGE && obj.STAGE.itemCode ? [obj.STAGE.itemCode] : [],
        subjectList: obj.SUBJECT && obj.SUBJECT.itemCode ? [obj.SUBJECT.itemCode] : []
      };
      this.getFindColumnTags(this.params);
    },

    getFindColumnTags (params) {
      findColumnTags(params).then(res => {
        console.log('栏目:', res.data);
        this.list = res.data;
      });
    }

  }
};
</script>

<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 10px;
}
.tags-box {
  height: 240px;
  overflow-y: auto;
  .tags-item {
    display: flex;
    padding: 0 15px;
    cursor: pointer;
    .checkbox {
    }
    .name {
      flex: 1;
    }
    .text-box {
      width: 120px;
    }
  }
  li.active {
    background: #c0d8fb;
  }
}
.btn-box {
  display: flex;
  .el-button {
    flex: 1;
  }
}
</style>
